<template>
  <div  class="wrap">
    <el-container class="container" style=" display: flex; flex-direction: column;">
      <el-header style="background-color: #060707;width: 100%; height: auto;display: flex;align-content: center; justify-content: space-between; ">
        <div class="container">
        <span class="span2">雨</span>
        <span class="span2">雾</span>
        <span class="span2">环</span>
        <span class="span2">境</span>
        <span class="span2">下</span>
        <span class="span2">的</span>
        <span class="span2">多</span>
        <span class="span2">源</span>
        <span class="span2">信</span>
        <span class="span2">息</span>
        <span class="span2">融</span>
        <span class="span2">合</span>
        <span class="span2">路</span>
        <span class="span2">径</span>
        <span class="span2">规</span>
        <span class="span2">划</span>
        <span class="span2">系</span>
        <span class="span2">统</span>
    </div>
        <!-- <div class="text"
          style="
            font-size: 50px;
            margin-left: 15px;
            height: 60px;
            line-height: 60px;
            /* color: white; */
          "
          >雨雾环境下的多源信息融合路径规划系统</div
        > -->
        <el-dropdown style="float: right; height: 60px; line-height: 60px">
          <span
            class="el-dropdown-link"
            style="color: aliceblue; font-size: 40px"
          >
            {{ user.name }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item style="justify-content: center; align-items: center;">
              <div @click="logout" style="font-size: 20px;">退出登录</div></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
    </el-container>

    <el-container>
      <!-- <el-aside
        :collapse="isCollapse"
        style="
          overflow: hidden;
          min-height: 100vh;
          background-color: #3e3f8f;
          width: 250px;
        "
      >
        <el-menu
          :default-active="$route.path"
          router
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#3e3f8f"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="/home">
            <i class="el-icon-menu"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/admin">管理员信息</el-menu-item>
              <el-menu-item index="user">用户信息</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>信息管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/book">信息管理</el-menu-item>
              <el-menu-item index="other">激光雷达数据</el-menu-item>
              <el-menu-item index="3-3"></el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside> -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Layout",

  data() {
    return {
      user: localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user"))
        : {},
    };
  },
  methods:{
    logout(){
      localStorage.removeItem("user");
      this.$router.push("/login");
      this.$message({
            message: '退出成功',
            type: 'success'
          });
    }
  }
};
</script>
<style>
.container{
  /* position: relative; */
  width: 100%;
  height: 120px;
  transition: 0.5s;
  
  display: flex;
  align-items: center;
  /* text-align: center; // 恢复之前的渐变色无动态记得取消注释*/

}
.container .text{
  height: auto;
  /* position: absolute; */
  top: 0;
  font-size: 120px;
  align-items: center; /* 垂直方向上居中 */
  /* width: 100%; */
  background: linear-gradient(315deg,#8CE084 25%,#F9F871);
  background-clip: text;
 -webkit-background-clip: text;
 color: transparent;
 filter: blur(2px);
    color: #fff;
    animation: animate 2.5s linear infinite;

}
.el-menu {
  border-right: none !important;
}
.wrap {
        transform-origin: 0px 0px 0px;
        background: url(../assets/img/bj.jpg) no-repeat;
        background-size: contain;
        background-position: 50% 0;
        background-color: rgb(0, 0, 0);
        min-width: auto;
        min-height: auto;
      }
.span2{
  height: auto;
    font-family: fira code;
    font-size: 50px;
   align-items: center; /* 垂直方向上居中 */
    filter: blur(2px);
    color: #fff;
    animation: animate 2.5s linear infinite;
}

.span2:nth-child(1){
    animation-delay: 0s;
}
span:nth-child(2){
    animation-delay: 0.25s;
}
span:nth-child(3){
    animation-delay: 0.5s;
}
span:nth-child(4){
    animation-delay: 0.75s;
}
span:nth-child(5){
    animation-delay: 1s;
}
span:nth-child(6){
    animation-delay: 1.25s;
}
span:nth-child(7){
    animation-delay: 1.5s;
}
span:nth-child(8){
    animation-delay: 1.75s;
}
span:nth-child(9){
    animation-delay: 2s;
}
span:nth-child(10){
    animation-delay: 2.25s;
}
span:nth-child(11){
    animation-delay: 2.5s;
}
span:nth-child(12){
    animation-delay: 2.75s;
}
span:nth-child(13){
    animation-delay: 3s;
}
span:nth-child(14){
    animation-delay: 3.25s;
}
span:nth-child(15){
    animation-delay: 3.5s;
}
span:nth-child(16){
    animation-delay: 3.75s;
}
span:nth-child(17){
    animation-delay: 4s;
}
span:nth-child(18){
    animation-delay: 4.25s;
}


@keyframes animate{
    0%,100%{
        filter: blur(2px);
        color: #fff;
        text-shadow: 0 0 10px #1e90ff,
        0 0 20px #1e90ff,  
        0 0 30px #1e90ff,  
        0 0 40px #1e90ff,        
        0 0 100px #1e90ff,  
        0 0 200px #1e90ff,  
        0 0 300px #1e90ff,  
        0 0 400px #1e90ff;
    }
    5%,95%{
        filter: blur(0px);
        color: #666;
        text-shadow: none;
    }
}
</style>
